<template>
	<view class="com-lx-container padding-top">
		<view class="base-font-36 tetx-333">行程路线</view>
		<view class="margin-top" v-for="(item,index) in list" :key="index">
			<view class="flex align-center justify-between">
				<view class="base-font-28 margin-top-xs">
					<text>D{{index+1}}</text><text class="margin-left-sm">{{item.name}}</text>
				</view>
				<view>
					
					<view class="flex align-center base-font-24 text-333"  v-if="item.show" @click="item.show=false">
						<text>收起</text>
						<text class="cuIcon-fold margin-left-xs"></text>
					</view>
					<view class="flex align-center base-font-24 text-333" v-else  @click="item.show=true">
						<text>展开</text>
						<text class="cuIcon-unfold margin-left-xs"></text>
					</view>
				</view>
			</view>
			
			
			<view class="margin-top " v-if="item.show">
				<view class="routeItem" v-for="(item2,index2) in item.list" :key="index2">
					<view class="flex">
						<view class="leftImage"><image src="../static/img/jdIcon.png" class="round" mode="aspectFit"></image></view>
						<view>
							<view class="rightBox padding-left-sm">
								<view class="base-font-28"><text>09:00</text><text class="margin-left-sm">曼听公园</text><text class="base-font-22 text-999 margin-left-xs">约2小时前</text></view>
								<view class="routeItemImg"><image src="../static/img/banner2.jpg" mode="aspectFill"></image></view>
								<view class="base-font-26 text-333 padding-tb-sm">曼听公园是很多游客进入版纳的第一站，白天可以赶摆，尝一尝傣族民间美食，看一看傣族非遗技艺，然后来到周总理雕像下，与各民族一起欢庆傣历新年的到来。</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="swiperBanner margin-top-sm" v-else>
				<swiper class="screen-swiper" 
				 :autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item2,index2) in item.list" :key="index">
						<view class="yxlxItem">
							<view class="swiper-item-img">
								<view class="local">
									<view class="flex align-center text-white  base-font-22">
										<text class="cuIcon-locationfill base-font-24"></text>
										<view class="" style="margin-left:6rpx;">上海</view>
									</view>
								</view>
								<image src="../static/img/banner.jpg" mode="scaleToFill"></image>
							</view>
						</view>
						
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>

	export default {

		data() {
			return {
				reload: "",
				list:[
					{id:1,name:'云南',show:true,list:[
						{id:1,img:"../static/img/jdIcon.png"},
						{id:1,img:"../static/img/jdIcon.png"},
						{id:1,img:"../static/img/jdIcon.png"}
					]},
					{id:1,name:'云南',show:false,list:[
						{id:1,img:"../static/img/jdIcon.png"},
						{id:1,img:"../static/img/jdIcon.png"},
						{id:1,img:"../static/img/jdIcon.png"}
					]},
					{id:1,name:'云南',show:false,list:[
						{id:1,img:"../static/img/jdIcon.png"},
						{id:1,img:"../static/img/jdIcon.png"},
						{id:1,img:"../static/img/jdIcon.png"}
					]}
				],
				currrentIndex:0

			}
		},
	
		methods: {
			
			
			
		},
		
	}
</script>
<style scoped lang="scss">
	@import "@/static/css/variables.scss";
	
	
	.com-lx-container{
		.routeItem{
			position: relative;
			
			&:before{content:'';display: inline-block;width:1rpx;height:calc(100% - 40rpx);background: #eeeeee;left:20rpx;top:40rpx;position: absolute;}
			&:last-child{
				&:before{display: none;}
			}
			.leftImage{width:40rpx;height:40rpx;flex-shrink:0;
				image{width:100%;height:100%}
			}
			.rightBox{width:645rpx;
				.routeItemImg{width:100%;height:456rpx;margin-top:20rpx;
					image{width:100%;height:456rpx;border-radius:8rpx;}
				}
			}
			
		}
		.swiperBanner{
			.screen-swiper{
				width:100vw;
				height:190rpx;min-height:100rpx!important;
				swiper-item{width:290rpx!important;height:190rpx;
				.yxlxItem{width:290rpx;height:190rpx;padding-right:20rpx;
					.swiper-item-img{
						position: relative;height:190rpx;width:100%!important;border-radius:16rpx;overflow: hidden;
						image{width:100%;height:190rpx;border-radius:16rpx;}
						.local{width:100%;height: auto;position: absolute;padding:30rpx 20rpx 10rpx 20rpx;left:0;bottom:0;z-index:10;
							@include bg-jb(top,bottom,rgba(0,0,0,0),rgba(0,0,0,0.6));
						}
					}
					.yxlxInfo{height:107rpx;padding-top:20rpx;}
					.avatarYxlx{width:30rpx;height:30rpx;
						image{width:100%;height:100%;}
					}
					.avatarYxlxName{padding-left:6rpx;width:6em;}
				}
					
				}
			}
			
		}
	}
</style>